<template>
  <div class="footer">
    <div class="bottomtop"></div>
    <div class="mod-us">
      <el-row :gutter="24">
        <el-col :span="6"><div >
          <ul v-for='item in help1'>
            <p onmouseover="this.style.color='#b8bfc7'" onmouseout="this.style.color='#868d93'">
           {{item.id}}
            </p>
          </ul>
        </div></el-col>
        <el-col :span="6"><div>
          <ul v-for='item in help2'>
            <p onmouseover="this.style.color='#b8bfc7'" onmouseout="this.style.color='#868d93'">
              {{item.id}}
            </p>
          </ul>
        </div></el-col>
        <el-col :span="6"><div>
          <ul v-for='item in help3'>
            <p onmouseover="this.style.color='#b8bfc7'" onmouseout="this.style.color='#868d93'">
              {{item.id}}
            </p>
          </ul>
        </div></el-col>
        <el-col :span="6" class="mod_us_law"><div >
          {{message}}
        </div></el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
export default {
  name: "bottom",
  data() {
    return {
      help1:[
        {id:'关于我们'},
        {id:'通讯'},
        {id:'常见问题'},
        {id:'其他Zero网站'},
        {id:'联系我们'},
      ],
      help2:[
        {id:'法律条款'},
        {id:'使用条款'},
        {id:'条款和条件'},
        {id:'隐私'},
        {id:'版权'},
        {id:'网站地图'}
      ],
      help3:[
        {id:'商务礼品'},
        {id:'职业'},
        {id:'专业人士适用的立方氧化锆和宝石'},
        {id:'专业人士适用的仿水晶'},
      ],
      message: "版权所有 © 2020 贵州理工学院网络工程171。保留所有权利。",
    }
  }
}
</script>

<style lang="scss" scoped>
.footer {
  float: left;
  width: 99.7%;
  .bottomtop {
    width: 100%;
    height: 30px;
    background-color: black;
  }
  .mod-us{
    width: 80%;
    margin: 0 auto;
    p{
      cursor: pointer;
    }
  }
  .mod_us_law{
    margin-top: 50px;
    font-family: 正楷;
    font-size: 14px;
  }

  .img7{
    height:30px;
    width:30px;
    padding-left: 400px;
  }
  .img6{
    height:40px;
    width:40px;
    padding-right: 400px;
    float:left;
  }
}
</style>

